<template>
  <div class="container">
    <div class="header">设备稼动状态</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import commomOption from './commomOption.ts'
import { renderItem } from './blockBarInit.ts'
import * as echarts from 'echarts'

const option = {
  tooltip: commomOption.tooltip,
  legend: commomOption.legend,
  grid: commomOption.grid,
  xAxis: Object.assign({}, commomOption.xAxis, {
    data: ['2012', '2013', '2014', '2015', '2016'],
  }),
  yAxis: commomOption.yAxis,
  series: [
    {
      name: '设备1',
      type: 'custom',
      barGap: 0,
      emphasis: {
        focus: 'series',
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(0, 172, 233, .1)',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(1, 254, 246, 1)' },
          { offset: 1, color: 'rgba(1, 25, 46, 1)' },
        ]),
      },
      renderItem: (params, api) => renderItem(params, api, 0),
      data: [320, 332, 301, 334, 390],
    },
    {
      name: '设备2',
      type: 'custom',
      emphasis: {
        focus: 'series',
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(0, 172, 233, .1)',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(12, 123, 236, 1)' },
          { offset: 1, color: 'rgba(1, 25, 46, 1)' },
        ]),
      },
      renderItem: (params, api) => renderItem(params, api, 1),
      data: [220, 182, 191, 234, 290],
    },
    {
      name: 'Desert',
      type: 'custom',
      emphasis: {
        focus: 'series',
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(0, 172, 233, .1)',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(246, 169, 68, 1)' },
          { offset: 1, color: 'rgba(1, 25, 46, 1)' },
        ]),
      },
      renderItem: (params, api) => renderItem(params, api, 2),
      data: [150, 232, 201, 154, 190],
    },
  ],
}

const { proxy } = getCurrentInstance()
const echartsBox = ref()
function echartInit() {
  nextTick(() => {
    let myChart = proxy.$echarts.init(echartsBox.value)

    option && myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  })
}
echartInit()
</script>
<style lang="less" scoped>
@import url(./container.less);
</style>
